/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

[hidden] {
  display: none; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-y: scroll; }

::-moz-selection {
  background: #7a0800;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #7a0800;
  color: #fff;
  text-shadow: none; }

a {
  color: #00e; }

a:visited {
  color: #551a8b; }

a:hover {
  color: #06e; }

a:focus {
  outline: thin dotted; }

a:hover, a:active {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

blockquote {
  margin: 1em 40px; }

dfn {
  font-style: italic; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

ins {
  background: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold; }

pre, code, kbd, samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: none; }

q:before, q:after {
  content: "";
  content: none; }

small {
  font-size: 85%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

ul, ol {
  margin: 1em 0;
  padding: 0 0 0 40px; }

dd {
  margin: 0 0 0 40px; }

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

form {
  margin: 0; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

label {
  cursor: pointer; }

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
  white-space: normal; }

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button, input {
  line-height: normal; }

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible; }

button[disabled], input[disabled] {
  cursor: default; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

input:invalid, textarea:invalid {
  background-color: #f0dddd; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td {
  vertical-align: top; }

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: black;
  padding: 0.2em 0; }

img {
  max-width: 100%; }

.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
  .clearfix:after {
    clear: both; }

@font-face {
  font-family: 'LeagueGothic';
  src: url("../fonts/League_Gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/League_Gothic-webfont.woff") format("woff"), url("../fonts/League_Gothic-webfont.ttf") format("truetype"), url("../fonts/League_Gothic-webfont.svg#svgFontName") format("svg"); }

::-moz-selection {
  background: #008fc2;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #008fc2;
  color: #fff;
  text-shadow: none; }

button,
input,
select,
textarea,
.stage,
.match {
  font-family: "alternate-gothic-no-1-d", arial, helvetica, sans-serif; }

button,
input,
select,
textarea {
  color: #7d7d7d;
  text-transform: uppercase; }

body {
  margin: 0;
  font-size: 1.875em;
  line-height: 1.333;
  color: #7d7d7d;
  font-family: "Museo-Slab", arial, helvetica, sans-serif; }
  @media screen and (max-width: 800px) {
    body {
      font-size: 1.25em; } }
  @media screen and (max-width: 400px) {
    body {
      font-size: 1em; } }

h1 {
  font-size: 94px;
  line-height: 0.8;
  letter-spacing: -2.5px;
  margin: 50px 0;
  color: #7ED6D0;
  text-shadow: 3px 3px 0px #000;
  -moz-transition: "font-size" "0.3s";
  -webkit-transition: "font-size" "0.3s";
  -o-transition: "font-size" "0.3s";
  transition: "font-size" "0.3s"; }
  @media screen and (max-width: 800px) {
    h1 {
      font-size: 2.33em;
      margin-bottom: 20px; } }
  @media screen and (max-width: 600px) {
    h1 {
      font-size: 1.5em;
      letter-spacing: 0;
      margin: 20px 0; } }
  @media screen and (max-width: 400px) {
    h1 {
      margin: 15px 0 5px; } }

a,
a:visited {
  cursor: pointer;
  text-decoration: none; }
  a:hover,
  a:visited:hover {
    text-decoration: underline; }

.ico {
  font-family: 'Pictos Custom'; }

body {
  background: url("../../img/bg.png") repeat;
  opacity: 0;
  -moz-transition: opacity 0.4s;
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s; }
  .lt-ie9 body {
    filter: alpha(opacity=0); }
  .no-js body, .wf-active body {
    opacity: 1; }
    .lt-ie9 .no-js body, .lt-ie9 .wf-active body {
      filter: alpha(opacity=100); }

img {
  max-width: 100%; }

span[data-large-src] {
  display: none; }

.input-screen {
  text-align: center;
  padding: 100px 50px;
  margin: 0 auto;
  -moz-transition: "padding" 1s;
  -webkit-transition: "padding" 1s;
  -o-transition: "padding" 1s;
  transition: "padding" 1s; }
  @media screen and (max-width: 1500px) {
    .input-screen {
      padding-top: 0; } }
  @media screen and (max-width: 800px) {
    .input-screen {
      padding: 0 20px; } }
  @media screen and (max-width: 600px) {
    .input-screen {
      padding: 0 10px; } }

.action-title {
  margin: 50px 0;
  font-size: 1em;
  color: #fff; }
  @media screen and (max-width: 1000px) {
    .action-title {
      margin: 20px 0; } }
  @media screen and (max-width: 800px) {
    .action-title {
      margin-top: 0; } }
  @media screen and (max-width: 600px) {
    .action-title {
      margin: 0 0 10px; } }

.loading {
  position: absolute;
  margin: -16px;
  top: 50%;
  left: 50%; }

.cancel,
.cancel:visited {
  color: #FFFFFF;
  display: block;
  font-size: 0.8em;
  margin: 0 auto 0;
  max-width: 400px;
  display: none;
  outline: none; }
  .new-tournament .cancel, .new-tournament
  .cancel:visited {
    opacity: 0; }
    .lt-ie9 .new-tournament .cancel, .lt-ie9 .new-tournament
    .cancel:visited {
      filter: alpha(opacity=0); }
  .cancel:active,
  .cancel:visited:active {
    outline: none; }

input:-moz-placeholder {
  color: #555; }

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
textarea {
  font-size: 1em;
  color: #959595;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid;
  border-color: #707070 #cfcfcf #f5f5f5 #cfcfcf;
  padding: 8px 10px 9px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  input[type=text].text-line,
  input[type=email].text-line,
  input[type=tel].text-line,
  input[type=number].text-line,
  textarea.text-line {
    background: transparent;
    color: #fff;
    font-size: 4em;
    padding: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0; }
  .input-screen input[type=text], .input-screen
  input[type=email], .input-screen
  input[type=tel], .input-screen
  input[type=number], .input-screen
  textarea {
    width: 100%; }

label {
  outline: none; }

.btn {
  border: 1px solid #a53036;
  font-size: 1.167em;
  color: #fff;
  font-weight: bold;
  padding: 0 30px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #a53036;
  background: -moz-linear-gradient(#a53036, #a53036);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a53036), color-stop(100%, #a53036));
  background: -webkit-linear-gradient(#a53036, #a53036);
  background: -o-linear-gradient(#a53036, #a53036);
  background: linear-gradient(#a53036, #a53036);
  -webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.65);
  -moz-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.65);
  box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.65);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px; }
  .btn.btn-big {
    font-size: 3em; }
    @media screen and (max-width: 600px) {
      .btn.btn-big {
        font-size: 2em;
        padding-top: 5px; } }
  .btn:hover {
    opacity: 0.9; }
    .lt-ie9 .btn:hover {
      filter: alpha(opacity=90); }
  .lt-ie9 .btn, .ie9 .btn {
    background: #d60179;
    box-shadow: none; }
  .lt-ie8 .btn {
    border: none; }
  .btn:active {
    top: 1px;
    left: 1px; }

a.btn,
.main a.btn {
  color: #fff;
  text-decoration: none;
  padding: 0 20px;
  display: inline-block;
  vertical-align: top; }
  .lt-ie8 a.btn, .lt-ie8
  .main a.btn {
    display: inline;
    zoom: 1; }

button.btn-big {
  padding-top: 10px; }

.wm-wrapper {
  position: relative; }
  .wm-wrapper .wm {
    position: absolute;
    top: 5px;
    left: 10px; }

.add-player {
  border: 4px solid #ccc;
  border-width: 0 0 4px; }
  .add-player input[type=text] {
    position: relative;
    top: 5px;
    border: none; }

.new-tournament {
  margin: 0 auto; }
  .new-tournament .btn {
    display: block;
    margin: 100px auto 0; }
    @media screen and (max-width: 800px) {
      .new-tournament .btn {
        margin: 20px auto; } }
  .new-tournament input[type=text] {
    font-size: 10em;
    color: #ddd; }

.player-list {
  margin: 0;
  padding: 0; }
  .player-list > li {
    display: inline-block;
    vertical-align: top; }
    .lt-ie8 .player-list > li {
      display: inline;
      zoom: 1; }
    .player-list > li a {
      display: block;
      color: #fff;
      font-size: 1em;
      padding: 16px 50px 10px 75px;
      min-height: 45px;
      margin: 0 3% 4%;
      background: #444;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
      opacity: 0.5;
      -moz-transition: opacity 0.4s;
      -webkit-transition: opacity 0.4s;
      -o-transition: opacity 0.4s;
      transition: opacity 0.4s; }
      .lt-ie9 .player-list > li a {
        filter: alpha(opacity=50); }
      .player-list > li a:hover {
        opacity: 1;
        text-decoration: none; }
        .lt-ie9 .player-list > li a:hover {
          filter: alpha(opacity=100); }
      .player-list > li a.selected {
        opacity: 1;
        background: #298b84; }
        .lt-ie9 .player-list > li a.selected {
          filter: alpha(opacity=100); }
      .player-list > li a:active {
        left: 1px;
        top: 1px; }
      .player-list > li a img {
        max-width: 50px;
        max-height: 50px;
        margin: 0;
        position: absolute;
        left: 10px;
        top: 10px; }
  @media screen and (max-width: 800px) {
    .player-list > li a {
      padding: 14px 50px 5px 60px;
      min-height: 35px; }
      .player-list > li a img {
        max-width: 35px;
        max-height: 35px; } }
  @media screen and (max-width: 600px) {
    .player-list {
      text-align: left; }
      .player-list > li {
        width: 50%; }
        .player-list > li a {
          min-height: 24px;
          padding: 5px 10px 5px 38px; }
          .player-list > li a img {
            left: 5px;
            top: 5px;
            max-width: 25px;
            max-height: 25px; } }
  @media screen and (max-width: 400px) {
    .player-list > li {
      width: auto;
      display: block; }
      .player-list > li a {
        margin: 0 0 3px; } }

#knockout {
  width: 10px;
  height: 10px;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%; }

.stage {
  width: 10%;
  display: inline-block;
  height: 20px;
  position: absolute;
  border: 4px solid #747474;
  border-width: 4px 4px 4px 0; }
  .stage.stage-a {
    border-width: 0;
    background: url(../img/final-bg.png) no-repeat -126px 0; }
    .stage.stage-a.position-1 {
      background-position: 126px 0; }
    .stage.stage-a .player {
      width: 50%;
      left: 0;
      top: 0;
      bottom: auto; }
      .stage.stage-a .player.position-1 {
        left: auto;
        right: 0; }
      .stage.stage-a .player .score {
        top: auto;
        bottom: -64%; }
  .stage.stage-b.position-1, .stage.stage-c.position-2, .stage.stage-c.position-3 {
    border-width: 4px 0 4px 4px; }
  .stage.on .player,
  .stage .player.waiting {
    color: #fff;
    font-size: 2.2em; }
  .stage.on.completed-game .player {
    font-size: 1em;
    color: #747474; }
  .stage.active-game .player .score {
    display: block; }

.player {
  position: absolute;
  text-transform: uppercase;
  color: #747474;
  font-size: 2em;
  width: 100%;
  letter-spacing: -1.2px;
  text-align: center;
  cursor: pointer;
  outline: none; }
  .player.a {
    top: 0;
    margin-top: -38px; }
  .player.b {
    bottom: 0;
    margin-bottom: -47px; }
  .player .score {
    position: absolute;
    bottom: -64%;
    left: 0;
    width: 100%;
    line-height: 1em;
    display: none; }
  .player.b .score {
    bottom: auto;
    top: -64%; }
  .player .name {
    display: inline-block;
    padding: 0 7px;
    background: #383838; }

.match-link {
  display: block;
  background: transparent;
  border: 20px solid transparent;
  display: block;
  height: 100%;
  margin: -20px;
  width: 100%; }
  .match-link:hover {
    background: rgba(243, 243, 243, 0.05); }

.match {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .match .player {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    margin: 0;
    font-size: 8em;
    letter-spacing: -0.05em; }
    .match .player.a {
      left: 0; }
    .match .player.b {
      right: 0; }
    .match .player .name,
    .match .player .score {
      position: absolute;
      left: 0;
      width: 100%;
      padding: 0; }
    .match .player .name {
      bottom: 50%; }
    .match .player .score {
      display: block;
      top: 50%;
      font-size: 1.5em;
      font-weight: bold;
      color: #fff;
      text-indent: -0.12em;
      letter-spacing: -0.12em; }

@media all and (max-width: 1200px) {
  .stage.on .player {
    font-size: 1.5em; } }
@media all and (max-width: 700px) {
  .stage.on .player {
    font-size: 1.2em; } }
